<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="../js/jquery-1.10.1.min.js"></script>
    <style>

        *{
            padding:0;
            margin:0;
        }
        .wrap{
            width:800px;
            height:360px;
            position:relative;
            border:1px solid #ddd;
            margin: 50px auto;
            /* overflow: hidden; */
        }
        ul{
            list-style: none;
        }
        .swiparbar{
            display: flex;
            position: absolute;
            left:0;
            top:0;
            /* width:4000px; */
        }
        .swiparbar li {
            width:800px;
            height:360px;
            
        }

        .swiparbar li img{
            width:800px;
            height:360px;
        }

        .img{
            position: absolute;
            top: 50%;
            width:50px;
            height:50px;
            border-radius: 50%;
            z-index:100;
            transform: translateY(-50%);
            cursor: pointer;
        }
        .prev{
            left:20px;
        }
        .next{
            right:20px;
        }

        .nav{
            position: absolute;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            width:100%;
            display: flex;
            justify-content: center;
        }
        .item{
            width:14px;
            height:14px;
            box-sizing: border-box;
            border:1px solid orange;
            border-radius: 50%;
            margin:0 6px;
        }
        .active{
            padding:2px;
            background: crimson;
        }
    </style>
</head>
<body>
    <div class="wrap">
        <img src="../imgs/previous.png" alt="" class="prev img">
        <img src="../imgs/next.png" alt="" class="next img">

        <ul class="swiparbar">
            <li><img src="../imgs/1.jpg" alt=""></li>
            <li><img src="../imgs/2.jpg" alt=""></li>
            <li><img src="../imgs/3.jpg" alt=""></li>
            <li><img src="../imgs/4.jpg" alt=""></li>
            <li><img src="../imgs/5.jpg" alt=""></li>
        </ul>

        <ul class="nav">
            <li class="active item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
            <li class="item"></li>
        </ul>
    </div>


    <script>

        var timer = null;
        var index = 0;    // loop  循环 
        var maxwidth = $(".swiparbar").width();
        var minwidth = $(".swiparbar li").width();
        var length = $(".swiparbar li").length;
        console.log(maxwidth,minwidth)

        $(".nav li").click(function(){
            index = $(this).index();
            console.log(index)
            $(this).addClass('active').siblings().removeClass("active");
            $(".swiparbar").animate({left: -minwidth * index},800,function(){})
            
        })
        $(".wrap").hover(function(){
            clearInterval(timer)
        },function(){
            autoplay()
        })
        function autoplay(){
            clearInterval(timer)
            timer = setInterval(function(){
                
                index+=1; 
                // 
                // var activeIndex = 
                $('.nav li').eq(index).addClass('active').siblings().removeClass("active");
                $(".swiparbar").animate({left: -minwidth * index},800,function(){
                    if(index>=$(".swiparbar li").length-1){
                        // // 生硬的切换 
                        // index = 0;
                        // $(".swiparbar").css({left:0})
                    }
                })
            },3000)
        }
        $(".prev").click(function(){
            index--;
            if(index<0){
                // index  = $(".swiparbar li").length  - 1;
                // $(".swiparbar").stop().css({left: -minwidth * index})   // 动画暂停 
                // index--;
                return false 
            }
            $(".swiparbar").animate({left: -minwidth * index},800,function(){
                if(index>=$(".swiparbar li").length-1){
                }
            })
        })

        $(".next").click(function(){
            index++;
            if(index>  $(".swiparbar li").length  - 1 ){
                // index = 0;
                // $(".swiparbar").stop().css({left: -minwidth * index})  
                // index++;
                return false;
            }
            $(".swiparbar").animate({left: -minwidth * index},800,function(){
                if(index>=$(".swiparbar li").length-1){
                    
                }
            })
        })
        $(function(){
            autoplay()
        })
    </script>
</body>
</html>